<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/flexible.js"></script>
		<script type="text/javascript" src="angular/angular.min.js"></script>
		<script type="text/javascript" src="angular/angular-route.js"></script>
		<link rel="stylesheet" type="text/css" href="./Swiper-3.4.2/dist/css/swiper.min.css"/>
		<style type="text/css">
			*{margin:0;padding:0;box-sizing:border-box;}
			header{
				width:10rem;
				height:1.40625rem;
				background-color:#ffd600;
				font-size:0.4375rem;
				font-weight:bold;
				display:flex;
				align-items: center;
				position:fixed;
				left:0;
				top:0;
			}
			header>img{
				height:1.40625rem;
				width:auto;
			}
			header>p{
				flex-grow:1;
				text-align:center;
			}
			header>p>img{
				/*vertical-align:middle;*/
			}
			footer{
				width:10rem;
				height:1.40625rem;
				background-color:rgba(243,243,244,0.9);
				position:fixed;
				left:0;
				bottom:0;
				color:#a7a7a8;
				font-size:0.3125rem;
			}
			footer ul{
				display:flex;
				width:10rem;
				height:1.40625rem;
				justify-content: space-around;
			}
			footer ul li{
				list-style:none;
				height:1.40625rem;
				display:flex;
				align-items:center;
				justify-content: center;
				text-align:center;
			}
			footer ul li img{
				height:0.671875rem;
				width:auto;
			}
			section{
				margin-top:1.40625rem;
				margin-bottom:1.40625rem;
			}
			#lunbo{
				height:3.75rem;
				width:10rem;
			}
			#lunbo img{
				height:3.75rem;
				width:10rem;
			}
			.tiao{
				width:10rem;
				height:0.328125rem;
				background-color:#efefef;
			}
			#fenlei{
				width:10rem;
				height:4.953125rem;
				display:flex;
				flex-wrap:wrap;
			}
			#fenlei figure{
				width:2.5rem;
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items:center;
			}
			#fenlei figure img{
				width:2.265625rem;
				height:auto;
			}
			#toutiao{
				width:10rem;
				height:1rem;
				display:flex;
				font-size:0.3125rem;
				align-items: center;
				color:#a0a0a0;
			}
			#toutiao img{
				height:1rem;
				width:auto;
			}
			#fangmai{
				padding:2px 0.234375rem;
				color:#ff0000;
				border:solid 0.03125rem #ff0000;
				border-radius:15px;
				font-weight:bold;
				height:0.5rem;
				margin-right:0.2rem;
			}
			#qishi{
				width:10rem;
				height:4.375rem;
				display:flex;
			}
			#qishi div{
				width:3.33333rem;
				display:flex;
				flex-direction:column;
				justify-content:center;
				align-items:center;
			}
			#qishi div img{
				width:2.6rem;
				height:auto;
			}
			.qishi1{
				color:#47c5e8;
				font-size:0.40625rem;
			}
			.qishi2{
				color:#9a9a9a;
				font-size:0.3125rem;
			}
			#tejia{
				width:10rem;
				height:4.0625rem;
				display:flex;
				flex-wrap: wrap;
			}
			#tejia .tejia1 img{
				height:1.4rem;
				width:auto;
			}
			#tejia .tejia1{
				width:5rem;
				height:2.03125rem;
				display:flex;
				justify-content:center;
				align-items:center;
				border:solid #e0e0e0 0.05rem;
			}
			.tejia3{
				color:#4a4a4a;
				font-size:0.375rem;
			}
			.tejia4{
				color:#f97e6f;
				font-size:0.28125rem;
			}
			.fruit{
				height:9.921875rem;
				width:10rem;
				display:flex;
				flex-wrap: wrap;
				justify-content: center;
				/*display:flex;*/
			}
			.fruit>img{
				width:9.3rem;
				height:2.5rem;
				
			}
			.fruit>.li{
				height:6.25rem;
				display:flex;
			}
			.fruit>.li>.li1{
				width:3.33333rem;
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.fruit>.li>.li1>img{
				height:2.2rem;
				width:auto;
			}
			.li2{
				display:flex;
				flex-direction: column;
				padding-left:0.234375rem;
			}
			.li2>.p1{
				font-size:0.375rem;
				color:#232b33;
				margin-bottom:0.15625rem;
				margin-top:0.3125rem;
				width:2.7rem;/*固定宽度*/
				white-space: nowrap;/*强制一行*/
				overflow:hidden;/*超出隐藏*/
				text-overflow: ellipsis;/*超出部分变为省略号*/
			}
			
			.li2>.span1{
				color:#ff0000;
				margin-bottom:0.15625rem;
			}
			.li2>.span1>.span11{
				color:#ff0000;
		        border:solid 1px #ff0000;
				padding:2px 6px;
				border-radius:5px;
				margin:0.078125rem 0.15625rem 0.078125rem 0; 
			}
			.li2>.span1>.span12{
				border-radius:5px;
				background-color:#ff0000;
				color:#fff;
				padding:2px 6px;
			}
			.li2>.span2{
				color:#999;
				font-size:0.375rem;
				margin-bottom:0.15625rem;
				width:3rem;/*固定宽度*/
				white-space: nowrap;/*强制一行*/
				overflow:hidden;/*超出隐藏*/
				text-overflow: ellipsis;/*超出部分变为省略号*/
			}
			
			.li2>.p2{
				color:#ff0000;
				margin-bottom:0.15625rem;
			}
			.li2>.p2>span{
				color:#999;
				
			}
			.fruit1{
				width:9.3rem;
				height:1.296875rem;
				display:flex;
				align-items: center;
			}
			.fruit2{
				color:#f38631;
				font-weight:bold;
				font-size:0.46875rem;
				border-left:solid 0.0625rem #f38631;
				padding-left:0.3125rem;
				
			}
			.fruit3{
				flex-grow: 1;
				display:flex;
				justify-content:flex-end;
			}
			#niunai{
				height:9.921875rem;
				width:10rem;
			}
			#ss{
				width:1rem;
			}
            a{
            	text-decoration: none;
            	color:#000;
            }
		</style>
	</head>
	<body>
		<!--<figure></figure>-->
		<!--flex-wrap:wrap;-->
		<!--<figcaption></figcaption>-->
		<div id="big_box">
			<header>
				<img src="img/sao.png"/>
				<p>济远路附近
					<img src="img/tou.png"/>
				</p>
				<img src="img/search.png"/>
			</header>
			<section ng-view>
				
			</section>
			<footer>
				<ul>
				<li>
					<a href="#/home" style="color:#777;text-decoration: none;">
					<div class="item">
						<div class="pic">
							<img src="img/首页.png"/>

						</div>
						<div class="text">
							首页
						</div>
					</div>
					</a>
				</li>
				<li>
					<a href="#/chaoshi热销榜"style="color:#777;text-decoration: none;">
					<div class="item">
						<div class="pic">
							<img src="img/闪电超市.png"/>

						</div>
						<div class="text">
							闪送超市
						</div>
					</div>
					</a>
				</li>
				<li>
					<a href="#/xinxian"style="color:#777;text-decoration: none;">
					<div class="item">
						<div class="pic">
							<img src="img/购物车.png"/>

						</div>
						<div class="text">
							新鲜预定
						</div>
					</div>
					</a>
				</li>
				<li>
					<a href="#/cars"style="color:#777;text-decoration: none;">
					<div class="item">
						<div class="pic">
							<img src="img/购物车.png"/>

						</div>
						<div class="text">
							购物车
						</div>
					</div>
					</a>
				</li>
				<li>
					<a href="#/geren"style="color:#777;text-decoration: none;">
					<div class="item">
						<div class="pic">
							<img src="img/我的.png"/>

						</div>
						<div class="text">
							我的
						</div>
					</div>
					</a>
				</li>
			</ul>
			</footer>
		</div>
	</body>
	<!--<script type="text/javascript" src="js/zhu.js"></script>-->
	<script type="text/javascript" src="js/luyou.js"></script>
	<script type="text/javascript" src="js/service.js"></script>
	<script type="text/javascript" src="home/shouye.js"></script>
	<script type="text/javascript" src="chaoshi/chaoshi.js"></script>
	<script type="text/javascript" src="miaosha/miaosha.js"></script>
	<script type="text/javascript" src="xinxian/xinxian.js"></script>
	<script type="text/javascript" src="cars/cars.js"></script>
	<script type="text/javascript" src="./Swiper-3.4.2/dist/js/swiper.min.js"></script>
	<!--<script type="text/javascript">
					window.onload=function(){
						var asd=document.getElementsByTagName("figure")[0];
					    console.log(asd);
					}
	</script>-->
</html>
